<style lang="scss" scoped>
  @import "../../utils/base.scss";
    .ivu-steps-item.ivu-steps-custom .ivu-steps-head-inner > .ivu-steps-icon{
        top: 0px;
    }
</style>

<template>
  <div class="quest_content" style="overflow-y:auto;height:100%;width:100%;">
    <template id="baseinfo">
      <div class="qheader" :style="{borderBottom: ifedit ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
        <p>基本信息</p>
      </div>
      <div class="gcontent">
        <Form ref="baseinfo" :model="applyinfo" :rules="projectInfoValidate" :label-width="labelWidth" label-position="left"
          class="form form_left">
          <Row v-if="reqId != null && reqId != ''">
            <Col span="8">
            <FormItem label="工单ID：">
              <Input v-model="reqId" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="姓名：" prop="name">
              <Input v-model="applyinfo.userName" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="邮箱：" prop="mail">
              <Input v-model="applyinfo.mail" :readonly="readonly" />
            </FormItem>
            </Col>

          </Row>
          <Row>
            <Col span="8">
            <FormItem label="电话：" prop="phone">
              <Input v-model="applyinfo.phone" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="一级4A账号：">
              <Input v-model="applyinfo.fourA" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>

          <Row>
            <Col span="8">
            <FormItem label="工单标题：" prop="reqSubject">
              <Input v-model="applyinfo.reqSubject" placeholder="XXX资源池+XXX系统+标题描述" :readonly="ifedit" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="策略类型：" prop="balanceType">
              <Select v-model="applyinfo.balanceType" :disabled="ifedit" :transfer='true' style="z-index:999">
                <Option value="轮训">轮训</Option>
                <Option value="高可用">高可用</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="源资源池：" prop="oriPool">
              <Input v-if="ifedit" v-model="applyinfo.oriPool" :readonly="true" />
              <Select v-else v-model="applyinfo.oriPool" :transfer='true' style="z-index:999">
                <Option value="哈尔滨资源池">哈尔滨资源池</Option>
                <Option value="呼和浩特资源池">呼和浩特资源池</Option>
                <Option value="业支非池化">业支非池化</Option>
                <Option value="信息港资源池">信息港资源池</Option>
                <Option value="省公司">省公司</Option>
                <Option value="专业公司">专业公司</Option>
                <Option value="其他">其他</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="目的资源池：" prop="tarPool">
              <Input v-if="ifedit" v-model="applyinfo.tarPool" :readonly="true" />
              <Select v-else v-model="applyinfo.tarPool" :transfer='true' style="z-index:999">
                <Option value="哈尔滨资源池">哈尔滨资源池</Option>
                <Option value="呼和浩特资源池">呼和浩特资源池</Option>
                <Option value="业支非池化">业支非池化</Option>
                <Option value="信息港资源池">信息港资源池</Option>
                <Option value="省公司">省公司</Option>
                <Option value="专业公司">专业公司</Option>
                <Option value="其他">其他</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="策略申请日期：" prop="startTime">
              <DatePicker :options="disabledDate" v-model="applyinfo.startTime" style="width: 100%;" type="date"
                :disabled="ifedit" placeholder="请选择日期"></DatePicker>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="策略失效日期：" prop="deadline">
              <DatePicker :options="disabledDate" v-model="applyinfo.deadline" style="width: 100%;" type="date"
                :disabled="ifedit" placeholder="请选择日期"></DatePicker>
            </FormItem>
            </Col>
          </Row>

          <Row>
            <Col span="8">
            <FormItem label="项目经理：" prop="pmName">
              <Input v-if="ifedit" v-model="applyinfo.pmName" :readonly="true" />
              <component v-else ref="inputSearch"  :isSysUser="false" :dataList="pmNameList"  :checkLable="applyinfo.pmId"
                :is="'inputSearch'"  :multiple="false" @on-change="changePmName"></component>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="项目经理手机：">
              <Input v-model="applyinfo.pmPhone" :readonly="true" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="IT业务需求负责人：" prop="itName">
              <Input v-if="ifedit" v-model="applyinfo.itName" :readonly="true" />
              <component v-else ref="inputSearch"  :isSysUser="false" :dataList="itNameList"  :checkLable="applyinfo.itId"
                :is="'inputSearch'"   :multiple="false" @on-change="changeItName"></component>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="IT业务需求负责人手机：">
              <Input v-model="applyinfo.itPhone" :readonly="true" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="工单发起时间：" prop="startTime">
              <DatePicker :options="disabledDate2" v-model="applyinfo.startTime" style="width: 100%;" type="date"
                :disabled="ifedit" placeholder="请选择日期"></DatePicker>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="期望完成时间：" prop="hopeTime">
              <DatePicker :options="disabledDate2" v-model="applyinfo.hopeTime" style="width: 100%;" type="date"
                :disabled="ifedit" placeholder="请选择日期"></DatePicker>
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </template>

    <!-- 附件 -->
    <template>
      <div class="qheader" :style="{borderBottom: ishidden ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
        <p>附件</p>
      </div>
      <component ref="file" :is="'file'" :ifedit="ifedit" :filesList="filesList" v-model="applyinfo.files"></component>
    </template>

  </div>
</template>

<script>
  import ajax from "../../ajax_util"
  import Axios from 'axios'
  import file from './settledin/file'
  import inputSearch from '../../base/input_search'

  export default {
    name: "apply",
    components: {
      file,
      inputSearch
    },

    data() {
      const validateEntryEndTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择期望完成时间'));
        } else {
          if (this.applyinfo.startTime === '') {
            callback(new Error('请选择工单发起时间'));
          } else if (this.applyinfo.startTime.getTime() > value.getTime()) {
            callback(new Error('期望完成时间不能小于工单发起时间'));
          } else {
            callback()
          }
        }
      };

      const validateEndTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择期望完成时间'));
        } else {
          callback()
        }
      };

      return {
        labelWidth: 140,
        readonly: true, //是否只读
        disabledDate: {
            disabledDate (date) {
                return date && date.valueOf() < Date.now()-24*60*60*1000 || date.valueOf() > 4070880000000;
            }
        },
        disabledDate2: {
            disabledDate (date) {
                return date && date.valueOf() < Date.now()-24*60*60*1000 || date.valueOf() > Date.now()+365*24*60*60*1000;
            }
        },
        // ifedit: this.isedit,
        applyinfo: {
          reqSubject: "", // 工单标题
          userName: "",
          fourA: "",
          phone: "",
          mail: "",
          pmName: "",
          pmId: "",
          pmPhone: "",
          itId: "",
          itName: "",
          itPhone: "",
          startTime: "",
          hopeTime: "",
          oriPool: "",
          tarPool: "",
          actTime: "",
          deadline: "",
          balanceType: "",
          files: []
        },
        itNameList: [],
        pmNameList: [],
        projectInfoValidate: {
          startTime: [{
            required: true,
            type: 'date',
            message: '请选择工单发起时间',
            trigger: 'change'
          }],
          hopeTime: [{
            required: true,
            validator: validateEntryEndTime,
            trigger: 'blur'
          }],
          actTime: [{
            required: true,
            type: 'date',
            message: '请选择策略申请时间',
            trigger: 'change'
          }],
          deadline: [{
            required: true,
            validator: validateEndTime,
            trigger: 'blur'
          }],
          balanceType: [{
            required: true,
            type: 'string',
            message: '请选择策略类型',
            trigger: 'change'
          }, ],
          oriPool: [{
            required: true,
            type: 'string',
            message: '请填写源资源池',
            trigger: 'change'
          }],
          tarPool: [{
            required: true,
            type: 'string',
            message: '请填写目的资源池',
            trigger: 'change'
          }],
          reqSubject: [{
            required: true,
            type: 'string',
            message: '请填写工单标题',
            trigger: 'change'
          },
            { type: 'string', max: 50, message: '最多填写50个字符', trigger: 'blur' }
          ],
          fourA: [{
            required: true,
            type: 'string',
            message: '请填写4A账号',
            trigger: 'change'
          }],
          pmName: [{
            required: true,
            type: 'string',
            message: '请填写项目经理',
            trigger: 'change'
          }],
          pmPhone: [{
              required: true,
              message: '请输入项目经理电话',
              trigger: 'blur'
            },
            {
              type: 'string',
              pattern: /^[1][0-9]{10}$/,
              message: '请输入正确的联系方式',
              trigger: 'blur'
            }
          ],
          itName: [{
            required: true,
            type: 'string',
            message: '请填写IT业务需求负责人',
            trigger: 'change'
          }],
          itPhone: [{
              required: true,
              message: '请输入IT业务需求负责人电话',
              trigger: 'blur'
            },
            {
              type: 'string',
              pattern: /^[1][0-9]{10}$/,
              message: '请输入正确的联系方式',
              trigger: 'blur'
            }
          ]
        },
      }
    },

    created: function() {

    },

    mounted: function() {
      console.log("this.reqId,this.draftsId---------->", this.reqId, this.draftsId)
      console.log('this.$store.state.tabs', this.$store.state.tabs)

      this.$nextTick(() => {
        if (this.reqId != null) {
          console.log("获取表单详情---------->");
          this.getApplyInfo(); //获取表单详情
        } else if (this.draftsId != null) {
          console.log("获取草稿---------->")
          this.getDrafts();
        } else {
          this.getUserInfo()
          this.applyinfo.startTime = new Date()
        }
      })
    },



    methods: {
      changeItName(list) {
        list.forEach(item => {
          this.applyinfo.itId = item.id
          this.applyinfo.itName = item.user_name
          this.applyinfo.itPhone = item.phone
        });
        this.itNameList = list
      },
      changePmName(list) {
        console.log('changePmName', list)
        list.forEach(item => {
          this.applyinfo.pmId = item.id
          this.applyinfo.pmName = item.user_name
          this.applyinfo.pmPhone = item.phone
        });
        this.pmNameList = list
      },
      getUserInfo() {
        var temp = this.$store.state.user
        this.applyinfo.userName = temp.user_name
        this.applyinfo.phone = temp.phone
        this.applyinfo.mail = temp.email
        //this.applyinfo.company = temp.company + "_" + temp.department
        this.applyinfo.userId = temp.id
        this.applyinfo.fourA = temp.fourA
      },

      getApplyInfo() {
        var data = this.processInfo
        console.log('getApplyInfo-data:', data)
        console.log("getApplyInfo----111->", data.content)
        this.applyinfo = data.content
        if (data.files != undefined && data.files != null) {
          this.applyinfo.files = data.files
        }
        if(this.ifedit){
          //this.networkInfo.startTime = this.formatDate(data.content.startTime)
          this.applyinfo.startTime = this.formatDate(data.content.startTime)
          this.applyinfo.hopeTime = this.formatDate(data.content.hopeTime)
          // this.applyinfo.actTime = this.formatDate(data.content.actTime)
          this.applyinfo.deadline = this.formatDate(data.content.deadline)
        }
        this.pmNameList = [{
          id: data.content.pmId,
          user_name: data.content.pmName,
        }]
        this.itNameList = [{
          id: data.content.itId,
          user_name: data.content.itName,
        }]
      },

      getDrafts() {
        var url = this.CONFIG.base_url_test + "/draft/content/" + this.draftsId
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log('drafts-', data.req)
            that.applyinfo = data.req.object
            that.applyinfo.startTime = that.formatDate(data.req.object.startTime)
            that.applyinfo.hopeTime = that.formatDate(data.req.object.hopeTime)
            that.applyinfo.deadline = that.formatDate(data.req.object.deadline)
            that.pmNameList = [{
              id: data.req.object.pmId,
              user_name: data.req.object.pmName,
            }]
            that.itNameList = [{
              id: data.req.object.itId,
              user_name: data.req.object.itName,
            }]
          }
        })
      },

      getInfo() {
        var t = JSON.stringify(this.applyinfo)
        var temp1 = JSON.parse(t)
        var temp = {}
        temp.base = {
          userId: temp1.userId,
          userName: temp1.userName
        }
        temp.object = temp1
        //temp.alloNet.startTime = new Date(temp1.startTime).getTime()/1000
        temp.object.startTime = new Date(temp1.startTime).getTime() / 1000
        temp.object.hopeTime = new Date(temp1.hopeTime).getTime() / 1000
        // temp.loadBalance.actTime = new Date(temp1.actTime).getTime()/1000
        temp.object.deadline = new Date(temp1.deadline).getTime() / 1000
        temp.files = this.applyinfo.files
        var publicInfo = this.utils.setPublicInfoInfo(temp.object.reqSubject, temp.object.startTime, temp.object.hopeTime,
          "")
        temp.puslicInfo = publicInfo
        console.log('getInfo:', temp)
        return temp
      },

      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        return year + '-' + month + '-' + day;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },

      validate() {
        var isSubmit = false
        this.$refs["baseinfo"].validate((valid) => {
          if (valid) {
            isSubmit = true
          } else {
            this.$Message.error('请填写必填项');
          }
        })
        return isSubmit
      },
      // 获取处理时需要提交的参数
      getHandleParams(handleInfo) {
        handleInfo.reqSubject = this.applyinfo.reqSubject
        handleInfo.startTime = new Date(this.applyinfo.startTime).getTime() / 1000
        handleInfo.hopeTime = new Date(this.applyinfo.hopeTime).getTime() / 1000
        handleInfo.reqDes = ""
        handleInfo.isEdit = this.isEdit;
        handleInfo.isChangeContent = 0;
    if(!this.ifedit){
      handleInfo.isChangeContent = 1;
    }
        if (this.isEdit == 1 ) {
          handleInfo.content = this.getInfo()
        }
      },
      //处理页面获取下一步处理人需要的参数
      getHandleUserParams(opOptions) {
        var param = {}
        param.vari = opOptions
        param.managerId = this.applyinfo.pmId;
        return param
      },
    },

    props: {
      isEdit:{},
      ifedit: {
        type: Boolean,
        default: false,
      },
      reqId: {
        default: null
      },
      draftsId: {
        default: null
      },
      filesList: {},
      processInfo: {},
      ishidden: {
        type: Boolean,
        default: false,
      },
    },
    // computed:{
    //     isEdit(){
    //         return this.$store.state.tabs != undefined && this.$store.state.tabs!=null? this.$store.state.tabs.isEdit:""
    //     }
    // },
    // watch:{
    //     isEdit(Val){
    //         if((Val + '') === (this.reqId + '')){
    //             this.ifedit = false
    //         }else{
    //             this.ifedit = true
    //         }
    //     }
    // }


  }
</script>
